<template>
    <view class="notice-container">
        <!-- 公告图标 -->
        <view class="notice-icon">
            <image class="icon" :src="noticeIcon"></image>

        </view>

        <!-- 滚动区域（自适应宽度） -->
        <view class="scroll-box" :style="{ height: itemHeight + 'rpx' }">
            <view v-if="noticeList.length > 0" class="scroll-content" :style="{
                transform: `translateY(-${currentIndex * 100}%)`,
                transition: autoPlay ? 'transform 0.6s ease-out' : 'none'
            }" @transitionend="handleTransitionEnd">
                <view class="notice-item" v-for="(item, index) in noticeList" @click="handleClick" :key="index"
                    :style="{ height: itemHeight + 'rpx', lineHeight: itemHeight + 'rpx' }">
                    {{ item.title }}
                </view>
            </view>
            <view v-if="noticeList.length == 0">暂无公告</view>
        </view>

        <!-- 操作按钮 -->
        <view class="notice-operate" @click.stop="handleMore">
            <image class="righticon" :src="noticeIcon1"></image>
        </view>
    </view>
</template>

<script>
export default {
    name: 'NoticeScroll',
    props: {
        // 公告列表 [{id, title}]
        noticeList: {
            type: Array,
            default: () => [],
            required: true
        },
        // 滚动间隔时间(ms)
        interval: {
            type: Number,
            default: 3000
        },
        // 单行高度比例（基于屏幕宽度的百分比，默认2.5%）
        lineHeightRatio: {
            type: Number,
            default: 2.5
        }
    },
    data() {
        return {
            noticeIcon: `${this.$baseIMGUrl}/static/assets/img/horn.png`,
            noticeIcon1: `${this.$baseIMGUrl}/static/assets/img/new04.png`,
            currentIndex: 0, // 当前显示索引
            autoPlay: true, // 是否自动播放
            timer: null, // 计时器
            itemHeight: 80, // 单行高度(rpx)
            safeAreaInsetRight: 0 // 右侧安全距离（适配全面屏）
        };
    },
    watch: {
        noticeList() {
            this.currentIndex = 0;
            this.resetTimer();
        },
        autoPlay(val) {
            val ? this.startTimer() : this.clearTimer();
        }
    },
    onLoad() {
        // 获取屏幕信息计算自适应高度
        const { windowWidth } = uni.getSystemInfoSync();
        // 基于屏幕宽度计算单行高度（确保在不同尺寸屏幕上比例一致）
        this.itemHeight = Math.round((windowWidth / 100) * this.lineHeightRatio * 2);

        // 获取右侧安全距离（适配iPhone X等全面屏）
        const { safeAreaInsets } = uni.getSystemInfoSync();
        this.safeAreaInsetRight = safeAreaInsets.right / 2; // 转换为rpx（1px=2rpx）
    },
    mounted() {
        if (this.noticeList.length > 1 && this.autoPlay) {
            this.startTimer();
        }
    },
    beforeDestroy() {
        this.clearTimer();
    },
    methods: {
        // 开始自动滚动
        startTimer() {
            this.clearTimer();
            this.timer = setInterval(() => {
                this.currentIndex = (this.currentIndex + 1) % this.noticeList.length;
            }, this.interval);
        },

        // 清除计时器
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },

        // 重置计时器
        resetTimer() {
            if (this.noticeList.length > 1 && this.autoPlay) {
                this.startTimer();
            }
        },

        // 动画结束后重启计时器
        handleTransitionEnd() {
            if (this.autoPlay && this.noticeList.length > 1) {
                this.startTimer();
            }
        },

        // 切换播放/暂停
        handleMore() {
             this.$emit('showtypeNotice')
            // this.autoPlay = !this.autoPlay;
        },

        // 点击公告跳转详情
        handleClick() {
            const current = this.noticeList[this.currentIndex];
            this.$emit('showdetail', current)
            //   if (current?.url) {
            //     uni.navigateTo({ url: current.url });
            //   }
        }
    }
};
</script>

<style scoped lang="scss">
.notice-container {
    display: flex;
    align-items: center;
    /* background-color: #FFF6F6; */
    color: blanchedalmond;
    /* border-radius: 10rpx; */
    /* margin: 15rpx 20rpx; */
    box-sizing: border-box;
}

.notice-icon {
    margin-right: 15rpx;
    flex-shrink: 0;
    position: relative;
    top: -28rpx;
    left:-40rpx;

    /* 防止图标被挤压 */

}

.icon {
    width: 70rpx;
    height: 70rpx;
}
.righticon{
    width: 40rpx;
    height: 40rpx;
    position: relative;
    top: 8rpx;
}

.scroll-box {
    flex: 1;
    /* 自适应剩余宽度 */
    overflow: hidden;
    position: relative;
    left: -40rpx;
}

.scroll-content {
    position: absolute;
    width: 100%;
}

.notice-item {
    width: 100%;
    font-size: 26rpx;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10rpx;
    box-sizing: border-box;
}

.notice-operate {
    margin-left: 15rpx;
    padding: 5rpx;
    flex-shrink: 0;
    /* 防止按钮被挤压 */
}
</style>